const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const ReactRefreshWebpackPlugin = require("@pmmmwh/react-refresh-webpack-plugin");
const VueLoaderPlugin = require("vue-loader/lib/plugin");

module.exports = {
  // watch: true,
  mode: "development",
  entry: "./src/index.js",
  output: {
    filename: "bundle.js",
    path: path.resolve(__dirname, "./build"),
    // vue
    // publicPath: "/abc",
  },
  devServer: {
    hot: true,
    hotOnly: true,
    // host: "0.0.0.0",
    port: "3000",
    open: true,
    compress: true,
    proxy: {
      "/api": {
        target: "http:loaclhost:8888",
        pathRewrite: {
          "^/api": "",
        },
        secure: false,
        changeOrigin: true,
      },
    },
    historyApiFallback: true,
    // historyApiFallback: {
    //   rewrites: {
    //     {from: /, to: }
    //   }
    // },
    // contentBase: path.resolve(__dirname),
    // watchContentBase: true,
    // publicPath: "/abc",
  },
  resolve: {
    extensions: [".js", ".json", ".wasm", ".mjs", ".vue", ".jsx"],
    alias: {
      "@": path.resolve(__dirname, "./src"),
      pages: path.resolve(__dirname, "./src/pages"),
    },
  },
  module: {
    rules: [
      {
        test: /\.jsx?$/i,
        use: "babel-loader",
      },
      {
        test: /\.vue$/i,
        use: "vue-loader",
      },
      {
        test: /\.css$/i,
        use: [
          "style-loader",
          {
            loader: "css-loader",
            options: {
              importLoaders: 2,
            },
          },
          "postcss-loader",
        ],
      },
    ],
  },
  plugins: [
    new HtmlWebpackPlugin({ template: "./index.html" }),
    new ReactRefreshWebpackPlugin(),
    new VueLoaderPlugin(),
  ],
};
